 <!--<template>
    
    <div class="sdy-category">
        <SdyHeader title="啥都有~分类页" back>asddas</SdyHeader>
        <div class="slide" ref="slide">
            通过给inner元素定位的方式，实现回弹的效果
            <div 
            class="inner"
            ref="inner"
            :style="{ top: posY + 'px' }"
            @touchstart="startHandler" 
            @touchmove="moveHandler"
            @touchend="endHandler">
                <van-sidebar v-model="index" @change="slideChangeHandler">
                    <van-sidebar-item v-for="item in cateList" :title="item" />
                    
                </van-sidebar>
            </div>
        </div>
        <div class="concent">
            <div class="item" v-for="item in goodsList">
            <p class="title">{{ item.brand }}</p>
            <ul>
                <li v-for="t in item.list">
                    <img :src="t.img1" alt="">
                    <span>名称</span>
                </li>
            </ul>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

import { categoryListApi, cateBrandListApi, categortBrandGoodsListApi } from '@/api/goods'

//导入相关ts接口
import type { MyCateBrandGoodsItem } from '@/config/interface'

//准备一个数据,表示当前触发的导航
const index = ref<number>(0)


// 操作让侧边栏滑动+回弹
//准备变量
const startY = ref<number>(0)
const moveY = ref<number>(0)
const startTop = ref<number>(0)
const posY = ref<number>(0)
//拿到元素
const inner = ref<HTMLDivElement | null>(null)
const slide = ref<HTMLDivElement | null>(null)

//鼠标按下的事件
const startHandler = (e: TouchEvent) => {
    //记录光标初始位置
    startY.value = e.touches[0].clientY
    //记录元素初始位置
    startTop.value = (inner.value as HTMLElement).offsetTop
}

//鼠标移动的事件
const moveHandler = (e: TouchEvent) => {
    //随时拿到坐标位置
    moveY.value = e.touches[0].clientY - startY.value
    // console.log(moveY.value)
    //随着移动，实时操作posY数值
    posY.value = moveY.value + startTop.value
    //判断边界值
    if (posY.value >= 100) posY.value = 100
    if (
        posY.value <= 
        -(inner.value as HTMLElement).offsetHeight - 
        -(slide.value as HTMLElement).offsetHeight - 100
        ) posY.value = 
        -(inner.value as HTMLElement).offsetHeight - 
        -(slide.value as HTMLElement).offsetHeight - 100
}
//鼠标移出的事件
    const endHandler = () => {
        moveY.value = 0
        //上方回弹
        if (posY.value >= 0) posY.value = 0
        //下方回弹
        if (
        posY.value <= 
        -(inner.value as HTMLElement).offsetHeight - 
        -(slide.value as HTMLElement).offsetHeight 
        ) posY.value = 
        -(inner.value as HTMLElement).offsetHeight - 
        -(slide.value as HTMLElement).offsetHeight 
    }

// 准备一个右侧内容渲染的数组
const goodsList = ref<MyCateBrandGoodsItem[]>([])

//准备一个根据当前分类请求分类内所有相关数据的方法
const getGoodsList = async (cate: string) => {
    console.log('我要根据 ${ cate } 去请求右边所有需要展示的数据')

    //1.根据当前 cate 请求回来品牌列表
    const brandList = await cateBrandListApi(cate)
    console.log(brandList)
    //2.根据品牌列表内的所以内容，去请求商品列表
    const list: Promise<any>[] = []
    brandList.data.forEach((item: { brand: string }) => {
        list.push(categortBrandGoodsListApi({ category: cate, brand: item.brand }))
    })
    const goods = await Promise.all(list)
    console.log(goods)
    
    // const goodsList = [
    //     {
    //         category: cate,
    //         brand: brandList.data[0].brand,
    //         goods: goods[0].data
    //     }
    // ]

    //3.组装数据
    const res: MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item: { brand: string }, index: number ) => {
        res.push({
            cate,
            brand: item.brand,
            list: goods[index].data
        })
    }) 
    

    goodsList.value = res
    
console.log(res)
}

//准备分类列表数组
const cateList = ref<string[]>([])

//slide导航切换事件
const slideChangeHandler = async (index: number) => {
//index 表示当前切换的索引
//只要从cateList中拿到对应的索引位置数据即可
//那到当前分类
const cate = cateList.value[index]
getGoodsList(cate)
console.log('切换了, 当前索引是：', cate)

}


//挂载完毕的钩子函数
onMounted(async () => {
    const res = await categoryListApi()
    cateList.value = res.data

    //在渲染完毕以后
    getGoodsList(res.data[0])
    
})

</script>

<style scoped lang="scss">
    .sdy-category {
        display: flex;
        height: 100%;
        
        > .slide {
            height: 100%;
            overflow: hidden;
            position: relative;
            width: 80px;

            > .inner {
                position: absolute;
                left: 0;
            }
        }
        
        > .conyent {
            flex: 1;
            overflow-y: auto;

            > .item {

                > .title {
                    height: 30px;
                    font-weight: 700;
                }
                
                > ul {
                    display: flex;
                    box-sizing: border-box;
                    padding: 10px;
                    justify-content: space-evenly;

                    > li {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        > img {
                            width: 50px;
                            height: 50px;
                            display: block;
                        }
                    }
                }
            }
        }
    }
    

</style> -->













<template>
    <div class="sdy-category">
      <SdyHeader title="啥都有 ~ 分类页" back>asdasd</SdyHeader>
      <div class="slide" ref="slide">
        <!-- 通过给 inner 元素定位的方式, 可以实现出界回弹效果 -->
        <div
          class="inner"
          ref="inner"
          :style="{ top: posY + 'px' }"
          @touchstart="startHandler"
          @touchmove="moveHandler"
          @touchend="endHandler">
          <van-sidebar v-model="index" @change="slideChangeHandler">
            <van-sidebar-item v-for="item in cateList" :title="item" />
          </van-sidebar>
        </div>
      </div>
      <div class="content">
        <div class="item" v-for="item in goodsList">
          <p class="title">{{ item.brand }}</p>
          <ul>
            <li v-for="t in item.list">
              <img :src="t.img1" alt="">
              <span>名称</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { categoryListApi, cateBrandListApi, categortBrandGoodsListApi } from '@/api/goods'
  // 导入相关 ts 接口
  import type { MyCateBrandGoodsItem } from '@/config/interface'
  
  // 准备一个数据, 表示当前触发的导航
  const index = ref<number>(0)
  
  // 操作让侧边栏滑动 + 回弹
  // 准备变量
  const startY = ref<number>(0)
  const moveY = ref<number>(0)
  const startTop = ref<number>(0)
  const posY = ref<number>(0)
  // 拿到元素
  const inner = ref<HTMLDivElement | null>(null)
  const slide = ref<HTMLDivElement | null>(null)
  // 鼠标按下的事件
  const startHandler = (e: TouchEvent) => {
    // 记录光标初始位置
    startY.value = e.touches[0].clientY
    // 记录元素初始位置
    startTop.value = (inner.value as HTMLElement).offsetTop
  }
  
  // 鼠标移动的事件
  const moveHandler = (e: TouchEvent) => {
    // 随时拿到坐标位置
    moveY.value = e.touches[0].clientY - startY.value
    // 随着移动, 实时操作posY 数值
    posY.value = moveY.value + startTop.value
  
    // 判断边界值
    if (posY.value >= 100) posY.value = 100
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight - 100
    ) posY.value =
    -(inner.value as HTMLElement).offsetHeight -
    -(slide.value as HTMLElement).offsetHeight - 100
  }
  
  // 鼠标移出的事件
  const endHandler = () => {
    moveY.value = 0
  
    // 上方回弹
    if (posY.value >= 0) posY.value = 0
  
    // 下方回弹
    if (
        posY.value <=
        -(inner.value as HTMLElement).offsetHeight -
        -(slide.value as HTMLElement).offsetHeight
    ) posY.value =
    -(inner.value as HTMLElement).offsetHeight -
    -(slide.value as HTMLElement).offsetHeight
  }
  
  
  // 准备一个右侧内容渲染的数组
  const goodsList = ref<MyCateBrandGoodsItem[]>([])
  
  // 准备一个根据当前分类请求分类内所有相关数据的方法
  const getGoodsList = async (cate: string) => {
    console.log(`我要根据 ${ cate } 去请求右边所有需要展示的数据`)
  
    // 1. 根据当前 cate 请求回来品牌列表
    const brandList = await cateBrandListApi(cate)
  
    // 2. 根据品牌列表内的所有内容, 去请求商品列表
    const list: Promise<any>[] = []
    brandList.data.forEach((item: { brand: string }) => {
      list.push(categortBrandGoodsListApi({ category: cate, brand: item.brand }))
    })
    const goods = await Promise.all(list)
  
    // 3. 组装数据
    const res: MyCateBrandGoodsItem[] = []
    brandList.data.forEach((item: { brand: string }, index: number) => {
      res.push({
        cate,
        brand: item.brand,
        list: goods[index].data
      })
    })
    goodsList.value = res
    console.log(res)
  }
  
  
  // 准备分类列表数组
  const cateList = ref<string[]>([])
  // slide 导航切换事件
  const slideChangeHandler = async (index: number) => {
  
    // index 表示当前切换的索引
    // 只要从 cateList 中拿到对应的索引位置数据即可
    // 拿到当前分类
    const cate = cateList.value[index]
    getGoodsList(cate)
  }
  
  // 挂载完毕的钩子函数
  onMounted(async () => {
    const res = await categoryListApi()
    cateList.value = res.data
  
    // 在渲染完毕以后
    getGoodsList(res.data[0])
  })
  </script>
  
  <style scoped lang="scss">
  .sdy-category {
    display: flex;
    height: 100%;
  
    > .slide {
      height: 100%;
      position: relative;
      width: 80px;
      overflow: hidden;
  
      > .inner {
        position: absolute;
        left: 0;
      }
    }
  
    > .content {
      flex: 1;
      overflow-y: auto;
  
      > .item {
  
        > .title {
          height: 30px;
          font-weight: 700;
        }
  
        > ul {
          display: flex;
          box-sizing: border-box;
          padding: 10px;
          justify-content: space-evenly;
  
          > li {
            display: flex;
            flex-direction: column;
            align-items: center;
  
            > img {
              width: 50px;
              height: 50px;
              display: block;
            }
          }
        }
      }
    }
  }
  </style>